<template>
    <div class="new-msg">
        <div class="new-msg-dialog">
            <div class="new-msg-title"><span style="margin-left: 50px;">新建短信</span></div>
            <div class="new-msg-receive"><span class="receive">收信人:</span><el-input v-model="phoneInput"
                    placeholder="请输入手机号码" /><span style="width: 62px;">{{ phoneNumInfo }}</span>
                <el-button icon="el-icon-user" @click="insertPhone(true)">添加</el-button>
            </div>
            <div class="new-msg-content"><el-input v-model="newMsgInput" type="textarea" :rows="20"
                    placeholder="请输入短信内容" resize="none" /></div>
            <div class="new-msg-send-btn"><el-button @click="sendNewMsg">发送</el-button></div>
        </div>
        <div v-if="addressVisible" class="address-list">
            <div class="address-title"><span style="margin-left: 50px;">通信录</span><i class="el-icon-circle-close"
                    @click="closeAddress" /></div>
            <div class="address-content">
                <el-input v-model="keword" placeholder="请输入关键字搜索">
                    <i slot="suffix" class="el-input__icon el-icon-search" @click="searchAddress" />
                </el-input>
                <el-checkbox v-model="checkAll" class="filter-checkbox" :indeterminate="isIndeterminate"
                    @change="handleCheckAllChange">全选</el-checkbox>
                <span class="address-checked" @click="lookCheckedAddress">{{ addressNumInfo }}</span>
                <el-divider />
                <el-tree v-show="addressTreeDisplay" ref="tree" class="filter-tree" node-key="uuid" show-checkbox
                    :data="points" :props="defaultProps" :filter-node-method="filterNode"
                    @check-change="handleCheckChange" />
                <div v-show="addressInfoDisplay" class="address-checked-info">
                    <el-checkbox v-for="item in checkedAddress" :key="item.uuid" class="address-info"
                        :label="item.title" checked disabled>{{ item.title }}</el-checkbox>
                </div>
            </div>
            <div v-show="addressFooterDisplay" class="address-footer"><span style="cursor: pointer;"
                    @click="goTree">返回上一页</span></div>
        </div>
    </div>
</template>

<script>
import { sendMessage, getDispatcher } from '@/api/message'
import axios from 'axios'

export default {
    data() {
        return {
            sender: '',
            phoneInput: '',
            newMsgInput: '',
            phoneNumInfo: '',
            addressVisible: false,
            keword: '',
            checkAll: false,
            isIndeterminate: false,
            addressNumInfo: '',
            points: [],
            defaultProps: {
                children: 'children',
                label: 'title'
            },
            checkedAddress: [],
            addressTreeDisplay: true,
            addressInfoDisplay: false,
            addressFooterDisplay: false
        }
    },
    watch: {
        phoneInput() {
            this.handlePhoneInfo()
        }
    },
    created() {
        if (this.$route.query != null && this.$route.query.sender != null) { this.sender = this.$route.query.sender }
        if (this.$route.query != null && this.$route.query.newMsgInput != null) { this.newMsgInput = this.$route.query.newMsgInput }
    },
    methods: {
        insertPhone(param) {
            this.addressVisible = true
            // getDispatcher(param).then(({ data }) => {
            // if (data.success) {
            //     this.points = data.data
            //     // this.points = this.normalizeTreeData(data.data)
            // }
            // })
            axios.get(`https://183.6.107.239:6443/client/dispatcher/query/premise/${param}`, {
                headers: {
                    clientCookie: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJuYW1lIjoiYzExZTBjNmMxNDliNjUwMTdhNWZiMmY1MTg3ODQ3MzUiLCJpZCI6IjIyMDJhMDc3YzY0ZGE0Y2E2ZmU3YjhkNmUyYTk0MjM5IiwidXNlclR5cGUiOjEsImV4cCI6MTc0Njg2NzMwNSwiaWF0IjoxNzE1MzMxMzA1fQ.DppkRdt9WWKX04K_i_V9Ces8J5fENPpYGL-nHNP_1n4'
                }
            }).then(({ data }) => {
                if (data.success) {
                    this.points = data.data
                    // this.points = this.normalizeTreeData(data.data)
                }
            })
        },
        noIncludeNode(nodes) {
            const addressNoInclude = []
            nodes.forEach(element => {
                let flag = false
                for (const i in this.$refs.tree.store.nodesMap) {
                    if (this.$refs.tree.store.nodesMap[i].data.mobile != null && this.$refs.tree.store.nodesMap[i].data.mobile == element) {
                        flag = true
                    }
                }
                if (!flag) { addressNoInclude.push(element) } // 手动输入的电话未在通讯录中,单独提取出来
            })
            return addressNoInclude
        },
        // normalizeTreeData(nodes) {
        //     return nodes.map(node => {
        //         if (!node.children) {
        //             // 如果没有子节点，则设置为空数组
        //             node.children = []
        //         } else if (node.children.length === 0) {
        //             // 如果子节点数组为空，也设置为空数组
        //             node.children = []
        //         } else {
        //             // 递归处理子节点
        //             node.children = this.normalizeTreeData(node.children)
        //         }
        //         return node
        //     })
        // },
        closeAddress() {
            this.addressVisible = false
            this.keword = ''
            this.points = []
            this.checkedAddress = []
            this.addressNumInfo = ''
            this.checkAll = false
            this.isIndeterminate = false
        },
        sendNewMsg() {
            // 发送新建短信
            // sendMessage({
            //     messageContent: this.newMsgInput,
            //     sender: this.sender,
            //     phoneSet: this.phoneInput.split('、').map(el => el.trim()).filter(item => item.trim() != '')
            // }).then(({ data }) => {
            //     if (data.success) {
            //         this.$message({
            //             message: '发送成功',
            //             type: 'success'
            //         })
            //         this.newMsgInput = ''
            //         this.phoneInput = ''
            //         this.closeAddress()
            //         this.msgDisplay = true
            //         this.closeMsgDialog()
            //         this.getMsgContent(null, null)
            //     } else {
            //         this.$message({
            //             message: '发送失败',
            //             type: 'error'
            //         })
            //     }
            // }).catch(() => {
            //     this.$message({
            //         message: '发送失败',
            //         type: 'error'
            //     })
            // })
            axios.post('https://183.6.107.239:6443/client/shorMsg/send', {
                messageContent: this.newMsgInput,
                sender: this.sender,
                phoneSet: this.phoneInput.split('、').map(el => el.trim()).filter(item => item.trim() != '')
            }).then(({ data }) => {
                if (data.success) {
                    this.$message({
                        message: '发送成功',
                        type: 'success'
                    })
                    this.newMsgInput = ''
                    this.phoneInput = ''
                    this.closeAddress()
                    this.$router.push('/szRobot/message')
                } else {
                    this.$message({
                        message: '发送失败',
                        type: 'error'
                    })
                }
            }).catch(() => {
                this.$message({
                    message: '发送失败',
                    type: 'error'
                })
            })
        },
        handlePhoneInfo() {
            const phones = this.phoneInput.split('、').map(el => el.trim()).filter(item => item.trim() != '')
            if (phones != null && phones.length > 0) { this.phoneNumInfo = '(共' + phones.length + '个)' } else { this.phoneNumInfo = '' }
        },
        searchAddress() {
            this.$refs.tree.filter(this.keword)
        },
        handleCheckAllChange() {
            this.isIndeterminate = false
            if (this.checkAll) {
                this.checkAll = true
                this.$refs.tree.setCheckedNodes(this.points)
                this.expandAll(true)
            } else {
                this.checkAll = false
                this.$refs.tree.setCheckedNodes([])
                this.expandAll(false)
            }
        },
        expandAll(flag) {
            if (flag) {
                for (const i in this.$refs.tree.store.nodesMap) {
                    this.$refs.tree.store.nodesMap[i].expanded = true
                }
            } else {
                for (const j in this.$refs.tree.store.nodesMap) {
                    this.$refs.tree.store.nodesMap[j].expanded = false
                }
            }
        },
        handleCheckChange() {
            const leafCheckeds = this.$refs.tree.getCheckedNodes(true, false)
            this.checkedAddress = leafCheckeds
            if (leafCheckeds != null && leafCheckeds.length > 0) { this.addressNumInfo = '查看已选' + leafCheckeds.length + '个' } else { this.addressNumInfo = '' }
            const checkeds = this.$refs.tree.getCheckedNodes(false, true).length
            const allNodes = Object.keys(this.$refs.tree.store.nodesMap).length
            if (checkeds === allNodes) {
                this.isIndeterminate = false
                this.checkAll = true
            } else {
                this.checkAll = false
                if (checkeds === 0) {
                    this.isIndeterminate = false
                } else {
                    this.isIndeterminate = true
                }
            }

            const nodes = this.phoneInput.split('、').map(el => el.trim()).filter(item => item.trim() != '')
            const phones = this.noIncludeNode(nodes)
            leafCheckeds.forEach(element => {
                if (element.mobile != null && element.mobile.trim() != '' && element.mobile.trim() != '-') { phones.push(element.mobile.trim()) }
            })
            this.phoneInput = phones.join('、')
        },
        filterNode(value, data) {
            if (!value) return true
            return data.title.indexOf(value) !== -1
        },
        lookCheckedAddress() {
            this.addressTreeDisplay = false
            this.addressInfoDisplay = true
            this.addressFooterDisplay = true
        },
        goTree() {
            this.addressTreeDisplay = true
            this.addressInfoDisplay = false
            this.addressFooterDisplay = false
        }
    }
}
</script>

<style scoped>
.new-msg {
    width: 840px;
    height: 657px;
    margin: auto;
    display: flex;
    justify-content: center;

    .new-msg-dialog {
        width: 480px;
        height: 657px;
        background: rgba(52, 65, 86, 1);

        .new-msg-title {
            width: 100%;
            height: 60px;
            background: linear-gradient(90deg, rgba(0, 255, 255, 0.4) 0%, rgba(13, 128, 236, 0) 100%);
            font-size: 20px;
            font-weight: 700;
            letter-spacing: 4px;
            color: rgba(0, 255, 255, 1);
            display: flex;
            align-items: center;
        }

        .new-msg-receive {
            width: 440px;
            height: 48px;
            background: rgba(63, 79, 105, 1);
            box-shadow: inset 0px 0px 4px rgba(80, 211, 225, 0.25);
            margin: 20px;
            display: flex;
            align-items: center;
            font-size: 16px;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);

            .receive {
                margin-left: 16px;
                width: 64px;
            }

            .el-input {
                width: 220px;
            }

            .el-input__inner {
                background: rgba(63, 79, 105, 1);
                width: 220px;
                font-size: 16px;
                font-weight: 500;
                color: rgba(255, 255, 255, 1);
                border: none;
                padding: 0 10px 0 0;
            }

            .el-button {
                background: none;
                width: 60px;
                font-size: 16px;
                font-weight: 500;
                color: rgba(0, 255, 255, 1);
                border: none;
                padding: 0;
            }
        }

        .new-msg-content {
            width: 440px;
            margin: 0 auto;

            .el-textarea {
                width: 100%;

                .el-textarea__inner {
                    margin: 0 auto;
                    background: rgba(63, 79, 105, 1);
                    border: none;
                    border-radius: 4px;
                    box-shadow: inset 0px 0px 4px rgba(80, 211, 225, 0.25);
                    font-size: 14px;
                    font-weight: 500;
                    color: rgba(255, 255, 255, 1);
                    -ms-overflow-style: none;
                    scrollbar-width: none;
                }

                .el-textarea__inner::-webkit-scrollbar {
                    display: none;
                }

            }
        }

        .new-msg-send-btn {
            width: 117px;
            height: 36px;
            margin: 22px auto;

            .el-button {
                width: 100%;
                height: 100%;
                border-radius: 2px;
                background: linear-gradient(180deg, rgba(52, 213, 235, 1) 0%, rgba(12, 150, 168, 1) 100%);
                border: none;
                font-size: 16px;
                font-weight: 500;
                color: rgba(255, 255, 255, 1);
            }
        }
    }

    .address-list {
        width: 360px;
        height: 657px;
        background: rgba(52, 65, 86, 1);
        opacity: 0.95;

        .address-title {
            width: 100%;
            height: 56px;
            font-size: 20px;
            font-weight: 500;
            color: rgba(223, 238, 243, 1);
            background: rgba(63, 79, 105, 1);
            display: flex;
            align-items: center;

            .el-icon-circle-close {
                margin-left: 220px;
                margin-bottom: 20px;
                cursor: pointer;
            }
        }

        .address-content {
            width: 100%;
            height: 541px;
            padding: 25px 20px;

            .el-icon-search {
                margin-right: 10px;
                font-size: 20px;
                height: 48px;
                color: rgba(0, 255, 255, 1);
                display: flex;
                align-items: center;
            }

            .el-icon-search:hover {
                cursor: pointer;
            }

            .el-input__inner {
                width: 100%;
                height: 48px;
                font-size: 16px;
                font-weight: 500;
                color: rgba(255, 255, 255, 0.6);
                border: 2px solid rgba(15, 217, 180, 1);
                background: rgba(80, 211, 225, 0.15);
                caret-color: rgba(0, 255, 255, 1);
                box-shadow: inset 3px 0px 0px rgba(80, 211, 225, 0.25);
            }

            .filter-checkbox {
                margin-top: 15px;
                margin-left: 25px;
                color: rgba(255, 255, 255, 1);
                font-size: 16px;
                font-weight: 500;
            }

            .address-checked {
                font-size: 16px;
                font-weight: 500;
                color: rgba(0, 255, 255, 1);
                margin-left: 137px;
                cursor: pointer;
            }

            .el-checkbox .el-checkbox__inner {
                border-radius: 50%;
                background-color: rgba(52, 65, 86, 1);
                border: 1px solid rgba(229, 230, 235, 1);
            }

            .el-checkbox .el-checkbox__input.is-checked .el-checkbox__inner {
                background: rgba(0, 125, 125, 1);
                border: 1px solid rgba(0, 125, 125, 1);
            }

            .el-checkbox__label {
                font-size: 16px;
                font-weight: 500;
                color: rgba(255, 255, 255, 1);
            }

            .el-divider--horizontal {
                height: 1px;
                background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(135, 135, 135, 0.5) 49.31%, rgba(255, 255, 255, 0) 100%);
                display: block;
                margin: 10px 0;
            }

            .filter-tree {
                width: 320px;
                height: 412px;
                overflow-y: auto;
                background: rgba(52, 65, 86, 1);
                color: rgba(255, 255, 255, 1);
                -ms-overflow-style: none;
                scrollbar-width: none;
            }

            .filter-tree::-webkit-scrollbar {
                display: none;
            }

            .el-tree-node {
                border-bottom: 1px solid;
                border-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(135, 135, 135, 0.5), rgba(255, 255, 255, 0)) 1 10;
            }

            .el-tree-node__label {
                font-size: 16px;
                font-weight: 500;
            }

            .el-tree .el-tree-node__content {
                height: 46px;
                background-color: rgba(52, 65, 86, 1);
            }

            .el-tree .el-tree-node__content:hover {
                background: rgba(189, 189, 189, 0.15);
                box-shadow: inset 0px 0px 4px rgba(80, 211, 225, 0.25);
            }

            .address-checked-info {
                width: 320px;
                height: 412px;
                overflow-y: auto;
                background: rgba(52, 65, 86, 1);
                color: rgba(255, 255, 255, 1);
                -ms-overflow-style: none;
                scrollbar-width: none;

                .address-info {
                    display: block;
                    padding: 13px 25px;
                    width: 300px;
                    height: 47px;
                    margin-right: 0;
                    border-bottom: 1px solid;
                    border-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(135, 135, 135, 0.5), rgba(255, 255, 255, 0)) 1 10;
                }
            }

            .address-checked-info::-webkit-scrollbar {
                display: none;
            }
        }

        .address-footer {
            width: 100%;
            height: 60px;
            background: rgba(63, 79, 105, 1);
            font-size: 16px;
            font-weight: 500;
            color: rgba(0, 255, 255, 1);
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
}
</style>
